<template>
    <view id="wallet" >
        <view class="content">
            <view class="balance text-center">
                <uni-card class="" borderColor="transparent">
                    <view class="balance-num">{{balance}}</view>
                    <view class="pale-text">钱包余额（元）</view>
                    <view class="balance-btn">
                        <button @click="goWithdraw()" class="btn" size="mini" round type="primary">提现</button>
                    </view>
                </uni-card>
            </view>
            <!-- <uni-list>
                <uni-list-item @click="goTodetail('/pages/wallet/bankCard/bankCard')" :show-extra-icon="true" :extra-icon="extraIcon1" title="银行卡" />
                <uni-list-item @click="goTodetail('/pages/wallet/billingDetails/billingDetails')" :show-extra-icon="true" :extra-icon="extraIcon1" title="账单明细" />
                <uni-list-item @click="goTodetail('/pages/wallet/accountSecurity/accountSecurity')" :show-extra-icon="true" :extra-icon="extraIcon1" title="账户安全" />
            </uni-list> -->
            <view class="form" @click="goTodetail('/pages/wallet/bankCard/bankCard')">
            	<view class="form-title"><view class="msfont ms-yinhangka"></view></view>
            	<input class="uni-input"  name="bank" :disabled="true"  value="银行卡" />
                <view class="form-action" ><uni-icons type="arrowright" color="#bbbbbb" size="20" /></view>
            </view>
            <view class="form" @click="goTodetail('/pages/wallet/billingDetails/billingDetails')">
            	<view class="form-title"><view class="msfont ms-zhangdan"></view></view>
            	<input class="uni-input"  name="bill" :disabled="true"  value="账单明细" />
                <view class="form-action" ><uni-icons type="arrowright" color="#bbbbbb" size="20" /></view>
            </view>
            <view class="form" @click="goTodetail('/pages/wallet/accountSecurity/accountSecurity')">
            	<view class="form-title"><view class="msfont ms-zhanghuanquan"></view></view>
            	<input class="uni-input"  name="safe" :disabled="true" value="账户安全"  />
                <view class="form-action" ><uni-icons type="arrowright" color="#bbbbbb" size="20" /></view>
            </view>
        </view>
    </view>
</template>
<script>
    import uniList from '@/components/uni-list/uni-list.vue'
    import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
    import uniCard from "@/components/uni-card/uni-card"
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import { getWalletInfo } from "@/common/api.js"
    export default {
        name: "wallet",
        data() {
            return {
                title: "钱包管理",
                balance:'0',
                navigateFlag: false,
                isLoading:false,
                bindFlag:false,
            };
        },
        components: {
            uniList,
            uniListItem,
            uniCard,
            uniIcons
        },
        methods: {
            goWithdraw(){
                if (this.navigateFlag) {
                    return;
                }
                this.navigateFlag = true;
                if(!this.bindFlag){
                    uni.showModal({
                        title: '提示',
                        content: '没有绑定银行卡，请先绑定',
                        confirmText:'去绑定',
                        success: function (res) {
                            if (res.confirm) {
                                uni.navigateTo({
                                    url: '/pages/wallet/bankCard/bankCard'
                                });
                            }
                        }
                    });
                    this.navigateFlag = false;
                    return;
                }
                uni.navigateTo({
                    url: '/pages/wallet/withdraw/withdraw'
                })
                setTimeout(() => {
                    this.navigateFlag = false;
                }, 1000)
            },
            goTodetail(url){
                if (this.navigateFlag) {
                    return;
                }
                this.navigateFlag = true;
                uni.navigateTo({
                    url: url
                })
                setTimeout(() => {
                    this.navigateFlag = false;
                }, 1000)
            },
            getData(){
                let p = getWalletInfo().then((res)=>{
                    const data = res.data
                    if(data.errcode==0){
                        this.balance = parseFloat(data.data.balance).toFixed(2);
                        this.bindFlag = Boolean(data.data.bank_id);
                        uni.setStorageSync('_walletInfo_',data.data)
                        uni.setStorageSync('_walletRate_',data.rate)
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p;
            }
        },
        onShow() {
            this.getData();

        }
    };
</script>
<style lang="scss">
    #wallet {
        position: relative;
        height: 100%;
        background: #fff;
        padding-top: 24rpx;
        .content {
            .balance {
                // margin: 15px;
                // height: 100px;

                // border-radius: 12px;
                // overflow: hidden;
                // border-color: transparent;
                // box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.1);
                // flex: 1;
                // padding: 15px 0;
                // margin-top: 0;

                .balance-num {
                    // margin-top: 15px;
                    // margin-bottom: 10px;
                    font-size: 48rpx;
                    font-weight: bold;
                    color: #333;
                }

                .pale-text {
                    font-size: 24rpx;
                    color: #bbb;
                    margin-bottom: 30rpx;
                }

                .balance-btn {
                    // margin-bottom: 15px;

                    .btn {
                        width: 160rpx;
                        border-radius: 30rpx;
                        color: #fff;
                        background: #1A66FF;
                    }
                }
            }
            .form{
                display: flex;
                // flex-direction: column;
                align-items: center;
                justify-content: center;
                flex: 1;
                background: #fff;

                margin: 14rpx 24rpx;
                border: 1px solid #fff;
                border-radius: 18rpx;
                box-shadow: 4rpx 4rpx 10rpx #eee;

                .form-title{
                    padding: 20rpx;
                    padding-left: 30rpx;
                    width: 70rpx;
                    text-align: center;
                }
                .form-action{
                    padding: 10rpx 30rpx;
                }
                .input-disabled{
                    color: #bbb;
                }
            }
            .detail {
                margin: 30rpx;

                .detail-item {
                    // box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
                }
            }
        }
    }
</style>
